<template>
    <div class="message-warp">
        <tab :custom-bar-width="getBarWidth" :scroll-threshold="5" :line-width="3" bar-active-color="rgb(255,218,68)">
            <tab-item v-for="(item,index) in tabItem" :selected="index === idx" @on-item-click="choose(item.id)" :key="item.id">{{item.name}}</tab-item>
        </tab>
        <div class="scroll-box">
            <div class="group" v-infinite-scroll="loadMore"
                 infinite-scroll-disabled="busy"
                infinite-scroll-distance="10">
                <div class="cell-box  flex" v-for="(item,index) in messageList" :key="index">
                 <router-link :to="{ path:'/twoPerson',query:{id:item.id}}">
                    <div class="news-box flex">
                        <img :src="item.headimgurl" alt="" class="left">
                        <div class="center">
                            <div class="name-box">{{item.nickname}}</div>
                            <div class="section-line">
                                {{item.city}}
                            </div>
                            <div class="supplement">
                                <span>{{item.fansCount}}位粉丝</span>
                            </div>
                        </div>
                    </div>
                 </router-link>
                </div>
             <load-more :tip="loadingText" :show-loading="loading"></load-more>
           </div>
        </div>
        <!-- <div class="bom-tip">请不要相信任何人发送的二维码链接,请勿私下交易谨防被骗</div> -->
    </div>
</template>

<script>
    import {Cell,Group,CellBox,Card,Tab,TabItem,LoadMore} from "vux";
 import axios from '@/api/request'
    export default {
        data() {
            return {
                tabItem: [
                    {id: "tb_user_entity", name: '我的关注'},
                    {id: this.$route.query.userId, name: '我的粉丝'},
                ],
                idx:0,
                loadingText:"正在加载",
                loading:true,
                busy:false,
                pageNumber:0,
                now:"tb_user_entity",
                messageList: []
            }
        },
        components: {
            TabItem,
            Cell,
            Group,
            CellBox,
            Tab,
            LoadMore
        },
        mounted(){
        },
        methods: {
            getBarWidth: function(index) {
                index = index || 0;
                let text = this.tabItem[index].name;
                return text.length * 16 / 37.5  + "rem";
            },
            choose(id){
                this.messageList=[]
                this.loadingText="正在加载",
                this.pageNumber=0
                if(id=='tb_user_entity'){
                   this.now="tb_user_entity"
                   this.loadMore()
                }else{
                    this.now=""
                    this.loadMore()
                }
            },
            loadMore(){
                this.busy =true;
                this.pageNumber++;
                  if(this.now=="tb_user_entity"){
                    this.getList()
                  }else{
                    this.getfans()
                  }
            },
            getList(){   //我的收藏
               var data={
                 pageNumber: this.pageNumber,
                 pageSize:10,
                 param:{
                   type : 3,
                   tableName : "tb_user_entity"	,
                   userId:this.$route.query.userId
                 }
               }
               var self=this
               console.log(this.pageNumber)
                axios('/device/collection/getMy','post',data).then(res=>{
                    if(res.data.code==1000){
                        console.log(res)
                         self.messageList=self.messageList.concat(res.data.data.list)
                       if(res.data.data.list.length<10){
                            self.loadingText="没有数据啦·～～·"    
                            self.loading=false        
                            self.busy = true;
                        }else{  
                            self.busy = false
                           
                        }
                    }
                })
            },

            getfans(data){
                console.log("123")
                var self=this
                 var data={
                 pageNumber: this.pageNumber,
                 pageSize:10,
                 param:{
                   proxyId:this.$route.query.userId
                 }
               }
               console.log(this.pageNumber)
                axios('/device/collection/getFans','post',data).then(res=>{
                    if(res.data.code==1000){
                        console.log(res)
                        self.messageList=self.messageList.concat(res.data.data.list)
                       if(res.data.data.list.length<10){
                            self.busy = true
                            self.loadingText="没有数据啦·～～·"    
                             self.loading=false  
                        }else{  
                            self.busy = false
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
     .group{
       position: absolute;
        top:44px;
        left:0;
        right:0;
        bottom: 0;
        overflow-y:scroll;
        -webkit-overflow-scrolling: touch;
        background: #f2f3f6;
     }
     .scroll-box{
     }
    .message-warp{
        height: 100%;
        box-sizing: border-box;
        // padding-top: 20rem/75;
        position: relative;
        background: rgb(242,243,247);
    }
    .cell-box:nth-child(1){
        background: #eee;
    }
    a{
        display: block;
        width:100%;
    }
    .news-box {
        width: 100%;
        background: #fff;
        height: 214rem/75;
        border-bottom: 1rem/37.5 solid #dbdbdb;
        .left {
            width: 110rem/75;
            height: 110rem/75;
            border-radius: 50%;
            margin-left: 40rem/75;
            margin-top: 40rem/75;
        }
        .center {
            width: 462rem/75;
            margin-left: 22rem/75;
            margin-top: 47rem/75;
            margin-left: 25rem/75;
            margin-right: 20rem/75;
            .name-box {
                font-size: 32rem/75;
                color: #444;
                font-weight: 600;
            }
            .section-line {
                font-size: 26rem/75;
                color: #333;
                margin-top: 14rem/75;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                font-weight: 600;
            }
            .supplement{
                // display: flex;
                font-size: 26rem/75;
                justify-content: space-between;
                margin-top: 18rem/75;
                padding-bottom: 6rem/37.5;
                color: #999;
            }
        }
        .right{
            margin-top: 34rem/75;
            width: 110rem/75;
            height: 110rem/75;
            border-radius: 6px;
            .redTip{
                background: #ff4444;
                width: 76rem/75;
                height: 36rem/75;
                line-height: 36rem/75;
                border-radius: 36rem/75;
                text-align: center;
                color: #fff;
            }
        }
    }
    .cell-box:last-child .news-box{
        border-bottom: none;
    }
    .first-cell-box .news-box{
        .right{
            margin-top: 72rem/75;
        }
    }
    .bom-tip{
        padding-top: 44rem/75;
        text-align: center;
        color: #999;
        font-size: 20rem/75;
    }
</style>

<style>
    .message-warp .vux-tab .vux-tab-item.vux-tab-selected {
        color: #feba4e;
    }

    .message-warp .vux-tab .vux-tab-item {
        color: #333333;
    }
</style>
